<template>
	<view class="template-create tn-safe-area-inset-bottom">
		<tn-nav-bar fixed :bottomShadow="false">红娘注册</tn-nav-bar>

		<view class="tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<block >
				
				<view class=" tn-margin-sm   ">
					<view class="stitle tn-flex tn-flex-row-between  tn-flex-col-center tn-padding-top-sm">
						<view class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view class="name tn-text-bold tn-margin-left-sm">红娘头像</view>
						</view>
						<view class="tn-color-gray">请上传正面头像照片
						</view>
					</view>
				</view>				
				<view class="tn-margin-left  ">
					<view v-if="!image" @click="chooseImage()" class="tn-margin tn-bg-gray--light tn-padding"
						style="border-radius: 10rpx;width: 200rpx;height: 200rpx;">
						<view class="tn-icon-add tn-color-black" style="font-size: 40px;margin-top: 30rpx;"></view>
					</view>
					<view v-if="image" @click="chooseImage()" class="tn-margin "
						style="border-radius: 10rpx;width: 200rpx;height: 200rpx;">
						<image :src="image" style="width: 200rpx;height: 200rpx;" mode="aspectFill"></image>
					</view>
				
				</view>
				
				<view class=" tn-margin-sm   ">
					<view class="stitle tn-flex tn-flex-row-between  tn-flex-col-center tn-padding-top-sm">
						<view class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view class="name tn-text-bold tn-margin-left-sm">红娘姓名</view>
						</view>
					</view>
					<view class="tn-margin-sm tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
						<input placeholder="请输入姓名" name="input" v-model="title"
							placeholder-style="color:#AAAAAA"></input>
					</view>
				</view>
				<view class=" tn-margin-sm   ">
					<view class="stitle tn-flex tn-flex-row-between  tn-flex-col-center tn-padding-top-sm">
						<view class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view class="name tn-text-bold tn-margin-left-sm">手机号码</view>
						</view>
					</view>
					<view class="tn-margin-sm tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
						<input placeholder="请输入手机号" name="input" v-model="mobile"
							placeholder-style="color:#AAAAAA"></input>
					</view>
				</view>
				<view class=" tn-margin-sm   ">
					<view class="stitle tn-flex tn-flex-row-between  tn-flex-col-center tn-padding-top-sm">
						<view class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view class="name tn-text-bold tn-margin-left-sm">登录密码</view>
						</view>
					</view>
					<view class="tn-margin-sm tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
						<input placeholder="请填写登录密码" name="input" v-model="password"
							placeholder-style="color:#AAAAAA"></input>
					</view>
				</view>
				<view class=" tn-margin-sm">
					<view class="stitle tn-flex tn-flex-row-between  tn-flex-col-center">
						<view class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view class="name tn-text-bold tn-margin-left-sm">自我介绍</view>
						</view>
					</view>
					<view class="tn-margin-sm tn-bg-gray--light tn-padding" style="border-radius: 10rpx;">
						<textarea maxlength="500" placeholder="请描述自我介绍" v-model="detail"
							placeholder-style="color:#AAAAAA"></textarea>
					</view>
				</view>


				<view class="selectbox tn-margin-sm  tn-padding-bottom ">
					<view @click="sexShow = true"
						class="stitle tn-flex tn-flex-row-between  tn-flex-col-center tn-padding-top-sm">
						<view class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view class="name tn-text-bold tn-margin-left-sm">收款方式</view>
						</view>
						<view class="">{{sex_name}}
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</view>
				<tn-select v-model="sexShow" :list="sexList" @confirm="sexTypeSelectConfirm"></tn-select>
				<block v-if="sex==1">
					<view class=" tn-margin-sm   ">
						<view class="stitle tn-flex tn-flex-row-between  tn-flex-col-center tn-padding-top-sm">
							<view class="tn-flex tn-flex-row-between tn-flex-col-center">
								<view class="name tn-text-bold tn-margin-left-sm">银行名称</view>
							</view>
						</view>
						<view class="tn-margin-sm tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
							<input placeholder="请填写银行名称" name="input" v-model="bank_name"
								placeholder-style="color:#AAAAAA"></input>
						</view>
					</view>
					<view class=" tn-margin-sm   ">
						<view class="stitle tn-flex tn-flex-row-between  tn-flex-col-center tn-padding-top-sm">
							<view class="tn-flex tn-flex-row-between tn-flex-col-center">
								<view class="name tn-text-bold tn-margin-left-sm">银行卡姓名</view>
							</view>
						</view>
						<view class="tn-margin-sm tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
							<input placeholder="请填写银行卡姓名" name="input" v-model="bank_username"
								placeholder-style="color:#AAAAAA"></input>
						</view>
					</view>
					<view class=" tn-margin-sm   ">
						<view class="stitle tn-flex tn-flex-row-between  tn-flex-col-center tn-padding-top-sm">
							<view class="tn-flex tn-flex-row-between tn-flex-col-center">
								<view class="name tn-text-bold tn-margin-left-sm">银行卡号</view>
							</view>
						</view>
						<view class="tn-margin-sm tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
							<input placeholder="请填写银行卡号" name="input" v-model="bank_card"
								placeholder-style="color:#AAAAAA"></input>
						</view>
					</view>
				</block>

				<block v-if="sex==2">
					<view class=" tn-margin-sm   ">
						<view class="stitle tn-flex tn-flex-row-between  tn-flex-col-center tn-padding-top-sm">
							<view class="tn-flex tn-flex-row-between tn-flex-col-center">
								<view class="name tn-text-bold tn-margin-left-sm">支付宝账号</view>
							</view>
						</view>
						<view class="tn-margin-sm tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
							<input placeholder="请填写支付宝账号" name="input" v-model="aliy_number"
								placeholder-style="color:#AAAAAA"></input>
						</view>
					</view>
					<view class=" tn-margin-sm   ">
						<view class="stitle tn-flex tn-flex-row-between  tn-flex-col-center tn-padding-top-sm">
							<view class="tn-flex tn-flex-row-between tn-flex-col-center">
								<view class="name tn-text-bold tn-margin-left-sm">支付宝姓名</view>
							</view>
						</view>
						<view class="tn-margin-sm tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
							<input placeholder="请填写支付宝姓名" name="input" v-model="aliy_username"
								placeholder-style="color:#AAAAAA"></input>
						</view>
					</view>
				</block>



				



				

				<view class='tn-tabbar-height'></view>
				<view class="tn-flex tn-footerfixed tn-flex-row-between">
					<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center" @click="fabuba()">
						<tn-button :backgroundColor="configInfo.button" padding="40rpx 0" width="60%" shadow fontBold>
							<text class="tn-icon-add tn-padding-right-xs "></text>
							<text class="">提交审核</text>
						</tn-button>
					</view>
				</view>
			</block>


		</view>









		<tn-modal v-model="tishishow" title="提示" :maskCloseable="false" :content="tishibody" :button="tishibutton"
			@click="tishicilck"></tn-modal>

  <ksp-cropper v-show="imageshow" mode="fixed" :width="500" :height="500" :maxWidth="500" :maxHeight="500"
			  	:url="image" @cancel="imageclose" @ok="imagecropperFinish"></ksp-cropper>
			  

	</view>



</template>

<script>
	import {
		host
	} from '@/siteinfo.js'
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'TemplateCreate',
		mixins: [template_page_mixin],
		data() {
			return {
				imageshow:false,
				image:'',
				bank_name: '',
				bank_username: '',
				bank_card: '',
				aliy_number: '',
				aliy_username: '',

				username: '',
				password: '',
				sex_name: '请选择',
				sex: 0,
				sexList: [{
					label: '支付宝',
					value: 2
				}, {
					label: '银行卡',
					value: 1
				}],
				sexShow: false,
				mobile: '',
				user_gongkai: true,
				user_quanzi: true,
				is_renshu: true,
				user_shenhe: false,
				baoming_show: false,
				times_baoming: '',
				baoming_istime: false,
				bu: 1,
				payshow: false,				
				checked: false,
				title: '',
				quan_id: 0,
				quan_title: "请选择",
				money_dashang: '',
				address: '',
				lat: '',
				lng: '',
				cate_id: 0,
				money_shang: '',
				times: '',
				times_end: '',
				zhuti: '请选择',
				paytype: '免费',
				money: 0,
				detail: '',
				num: 1,
				selectList: [],
				selectShow: false,
				border: false,
				actionSheetShow: false,
				show: false,
				show_end: false,
				mode: 'date',
				showLunar: true,
				activeBgColor: '#01BEFF',
				activeColor: '#FFFFFF',
				rangeBgColor: '#E6E6E655',
				rangeColor: '#01BEFF',
				btnColor: '#01BEFF',
				lunarColor: '#AAAAAA',
				startText: '开始',
				endText: '结束',
				toolTips: '请选择日期',
				changeYear: true,
				changeMonth: true,
				result: '',
				//、
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true
				},
				//
				tagList: [],
				action: '',
				formData: {
					apiType: 'this,ali',
					token: uni.getStorageSync('token'),
					image: null
				},
				fileList: [],
				showUploadList: true,
				customBtn: false,
				autoUpload: false,
				showProgress: false,
				deleteable: true,
				customStyle: false,
				maxCount: 1,
				disabled: false,
				tishibutton: [{
					text: '确定',
					backgroundColor: 'tn-bg-indigo',
					fontColor: '#FFFFFF'
				}],
				tishibody: '',
				tishishow: false,
				img_num: 0,

			}
		},
		onLoad(option) {
			let that = this
			uni.$off('setLoginBoxFlag');
			uni.$on('setLoginBoxFlag', loginBoxFlag => {
				that.loginBoxFlag = loginBoxFlag;
			});

			uni.$on('quan', loginBoxFlag => {
				that.quan_id = loginBoxFlag.id
				that.quan_title = loginBoxFlag.title
			});
			that.action = host + '/chat/user/up_img'


			//this.info()
		},
		methods: {
			// 裁剪完成
			imagecropperFinish(res) {
				this.image = res.path
				this.imageshow = false
			},
			imageclose() {
				this.imageshow = false
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0]
						this.image = tempFilePaths
						this.imageshow = true
					}
				})
			},
			
			sexTypeSelectConfirm(event) {
				this.sex_name = `${event[0]['label']}`
				this.sex = `${event[0]['value']}`
			},
			

			tishicilck(e) {
				uni.navigateBack()
			},


			payConfirm(event) {
				this.paytype = event[0].label
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			showCalendar() {
				this.show = true
			},
			
		
			fabu() {


				if (this.title == '') {
					this.msg('请输入商户名称')
					return
				}

				if (this.username == '') {
					this.msg('请输入登录账号')
					return
				}

				if (this.password == '') {
					this.msg('请输入账号密码')
					return
				}
				if (this.detail == '') {
					this.msg('请输入商户介绍')
					return
				}

				if (this.sex == 0) {
					this.msg('请选择收款方式')
					return
				}
				if (this.sex == 2) {

					if (this.aliy_username == '') {
						this.msg('请输入支付宝名称')
						return
					}
					if (this.aliy_number == '') {
						this.msg('请输入支付宝账号')
						return
					}
				}
				if (this.sex == 1) {
					if (this.bank_name == '') {
						this.msg('请输入银行名称')
						return
					}
					if (this.bank_username == '') {
						this.msg('请输入银行卡姓名')
						return
					}
					if (this.bank_card == '') {
						this.msg('请输入银行卡卡号')
						return
					}
				}
				if (this.mobile == '') {
					this.msg('请输入客服电话')
					return
				}

				if (this.address == '请选择地点') {
					this.msg('请选择商户地址')
					return
				}



				if (this.img_num == 0) {
					this.msg('请至少选择一张图片')
					return
				}
				uni.showLoading({
					'title': '提交中'
				})
				this.$refs.imageUpload.upload()


			},

			async send() {


				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/shop/add_biz',
					data: {
						title: that.title,
						username: that.username,
						password: that.password,
						content: that.detail,
						jiesuan_type: that.sex,
						bank_name:that.bank_name,
						bank_username:that.bank_username,
						bank_card: that.bank_card,
						aliy_number: that.aliy_number,
						aliy_username: that.aliy_username,
						images: that.okpiclist,
						address: that.address,
						lat: that.lat,
						lng: that.lng,
						mobile: that.mobile
					}
				});

				if (result.statusCode == 200) {
					if (result.data.code == 200) {

						uni.hideLoading()
						uni.showModal({
							title: '提示',
							content: result.data.msg,
							confirmText: '知道了',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {								
									uni.navigateBack()
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});



					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}


			},


		}
	}
</script>

<style lang="scss" scoped>
	.template-create {}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		bottom: 0;
		position: fixed;
		width: 100%;
		z-index: 1;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	.topnav {
		background: rgba(0, 125, 255, 0.08);
		border-radius: 8upx;
		height: 100upx;
	}

	.textarea {
		.texttitle {
			font-weight: bold;
			color: #808080;
		}

		.inp {
			border-radius: 16upx;
			border: 1px solid #ccc;
			padding: 20upx;
			width: 100%;
		}
	}

	.ft {
		font-size: 20upx;
		color: #808080;
	}

	.ftf {
		color: #808080;
	}

	.tags {
		margin-top: 20upx;

		.tagl {
			.tagitem {
				background: rgba(0, 0, 0, 0.05);
				border-radius: 20upx;
				font-weight: bold;
				padding: 5upx 20upx;
			}

			.two {
				margin-left: 20upx;
			}

		}

		.tagr {
			.tagitem {
				border-radius: 20upx;
				background: rgba(0, 0, 0, 0.05);
				//color: #8F3C00;
				padding: 5upx 20upx;

				font-weight: bold;
			}
		}
	}

	.upload {
		.desc {
			width: 60%;
			background: #f3f3f3;
			border-radius: 20upx;
			padding: 5upx 15upx;

			.icon {
				font-size: 20upx;
			}

			.txt {}
		}
	}

	.selectbox {
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}

	/* 标签内容 end*/
</style>